<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>WEBSQL-SQL执行窗口</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static/img/favicon.ico}" media="screen"/>
    <link rel="stylesheet" th:href="@{/static/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/static/code/codemirror.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/static/code/show-hint.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/static/code/highlight.min.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/sqlPage.css}" media="all">
</head>
<body>
<div id="menu-id">
    <form class="layui-form card">
        <div class="layui-form-item button-row">
            <div class="layui-input-inline layui-select-sm">
                <select name="dbtype" id="dbtype" lay-filter="dbtype" lay-search="" lay-affix="clear"></select>
            </div>

            <div class="layui-input-inline layui-select-sm">
                <select name="sqlTexts" id="sqlTexts" lay-filter="sqlTexts" lay-search="" lay-affix="clear"></select>
            </div>
            <button class="layui-btn layui-btn-primary layui-btn-sm layui-border-green"
                    id="execute" lay-submit lay-filter="execute">
                <i class="layui-icon layui-icon-play"></i> 执行F8
            </button>

            <button id="newSqlOpen" onclick="window.open(ctx+'sqlManager/sqlPage');return false"
                    class="layui-btn layui-btn-primary layui-btn-sm layui-border-blue">
                <i class="layui-icon layui-icon-layer"></i> 大窗口F7
            </button>

            <button id="saveSqlText" class="layui-btn layui-btn-primary layui-btn-sm layui-border-orange"
                    lay-submit lay-filter="saveSqlText">
                <i class="layui-icon layui-icon-add-1"></i> 保存F9
            </button>

            <button id="exportExcel" class="layui-btn layui-btn-primary layui-btn-sm layui-border-red"
                    lay-submit lay-filter="exportExcel">
                <i class="layui-icon layui-icon-export"></i> 全部导出
            </button>

            <button id="showSqlDiv" class="layui-btn layui-btn-primary layui-btn-sm layui-border-purple"
                    lay-submit lay-filter="showSqlDiv">
                <i class="layui-icon layui-icon-up"></i> 收起
            </button>
            <button class="layui-btn layui-btn-primary layui-btn-sm layui-border" id="dropdownTableSize">
                表格尺寸
                <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>
            <div class="layui-form-mid slider-wrapper">
                <div id="id-slider" style="width: 100px;"></div>
            </div>
            <div class="layui-form-mid slider-wrapper">
                <div id="id-editorSlider" style="width: 100px;"></div>
            </div>
            <div id="rollBox"
                 style="height:40px;line-height:40px;text-align:center;overflow:hidden;">
            </div>
        </div>
    </form>
</div>

<div class="card sqlText" id="ID-dropdown-contextmenu">
    <textarea id='sqlText' style="width: 99%;height: 400px;align-content: center;"></textarea>
</div>

<div id="msgDiv" class="layui-row sqlTab card"
     style="display: none;position: relative;padding: 8px;box-sizing: border-box;">
    <div style="font-size: 13px;color: #61914e;display:block;">
        <span id="msgSpan"
              style="margin-left: 10px;display:block;width:95%;word-wrap:break-word;white-space:normal;"></span>
    </div>
    <i class="layui-icon layui-icon-close layui-unselect layui-tab-close" id="closeMsgDivBtn"></i>
</div>

<div class="layui-row sqlTab card" style="display: none;" id="sqlTableDiv">
    <div class="layui-tab layui-tab-brief" lay-filter="sqlTableTab" lay-allowclose="true">
        <ul class="layui-tab-title" id="lists">
        </ul>
        <div class="layui-tab-content" id="listsContent">
        </div>
    </div>
</div>

<div id="view-open-table-wrapper" style="display: none;padding: 10px;" class="hidden-scrollbar">
</div>

<script th:src="@{/static/layui.js}"></script>
<script th:replace="~{base::ctx}"></script>
<script th:src="@{/static/lay-config.js}"></script>
<script th:src="@{/static/code/codemirror.js}"></script>
<script th:src="@{/static/code/matchbrackets.js}"></script>
<script th:src="@{/static/code/sql.js}"></script>
<script th:src="@{/static/code/show-hint.js}"></script>
<script th:src="@{/static/code/sql-hint.js}"></script>
<script th:src="@{/static/code/sql-formatter.min.cjs}"></script>
<script th:src="@{/static/code/placeholder.js}"></script>
<script th:src="@{/static/code/highlight.min.js}"></script>
<script th:src="@{/static/base64.min.js}"></script>
<script th:replace="~{tableSqlPageMeta}"></script>
<script>
    const textArr = [
        '【编辑器】区域内鼠标点击右键试试~',
        '【编辑器】选中表名+Alt+X 可以查看元数据~',
        '【编辑器】选中表名+Alt+Z 查看建表语句~',
        '【编辑器】Alt+C 格式化SQL',
        '【编辑器】Ctrl  可以自动提示关联',
        '【编辑器】F7    打开新的窗口',
        '【编辑器】F8    执行所有SQL语句',
        '【编辑器】F9    保存SQL片段',
        '【编辑器】选中内容+F8 选中SQL单条执行',
        '拖动左侧滑块，可以修改编辑大小哦~',
        '【结果集】 选中数据右键试试~',
        '全部导出为离线全量下载，小数据量推荐使用结果集右上角导出~',
        '无法执行Drop等语句？ 参数设置-语句限制修改~',
        '默认展示多少条数据能修改吗？ 默认1000条，参数设置-分页条数修改！'
    ];
    layui.use(['jquery', 'layer', 'form', 'element', 'laySelect', 'table', 'dropdown', 'util', 'laytpl', 'code', 'slider'], function () {
        const layer = layui.layer;
        const form = layui.form;
        const $ = layui.jquery;
        const element = layui.element;
        const select = layui.laySelect;
        const table = layui.table;
        const dropdown = layui.dropdown;
        const util = layui.util;
        const laytpl = layui.laytpl;
        const code = layui.code;
        const slider = layui.slider;
        let pageVisibility;  //页面隐藏
        let editorFontSizeKey = "editorFontSize";
        let tableSizeKey = "tableSize";
        let editorHeightKey = "editorHeight";


        /**
         * 编辑器初始化
         * @type {CodeMirror}
         */
        const editor = CodeMirror.fromTextArea(document.getElementById("sqlText"), {
            mode: {
                name: "text/x-plsql"
            },
            matchBrackets: true,
            styleActiveLine: true,
            indentWithTabs: true,
            smartIndent: true,
            lineNumbers: true,
            spellcheck: true,
            lineWrapping: true,
            resetSelectionOnContextMenu: true,
            extraKeys: {
                'Ctrl': 'autocomplete',
                Tab: function (cm) {
                    let spaces = Array(cm.getOption('indentUnit') + 1).join(' ');
                    cm.replaceSelection(spaces);
                },
                'Alt-X': function (cm) {
                    hintMeta(cm);
                },
                'Alt-C': function (cm) {
                    formatSql(cm);
                },
                'Alt-Z': function (cm) {
                    showTableSql(cm);
                }
            },
            hintOptions: {completeSingle: false}
        });

        /**
         * 自动提示
         */
        editor.on('keypress', () => {
            editor.showHint();
        });

        /**
         * 字体.编辑器大小调整
         * @type {HTMLElement}
         */
        editor.getWrapperElement().style.fontSize = viewStore.get(editorFontSizeKey, 14) + 'px';
        editor.setSize(null, viewStore.get(editorHeightKey, 230));
        editor.refresh();

        slider.render({
            elem: '#id-slider',
            value: viewStore.get(editorFontSizeKey, 14),
            min: 10,
            max: 30,
            change: function (size) {
                editor.getWrapperElement().style.fontSize = size + 'px';
                editor.refresh();
            },
            done: function (value) {
                viewStore.put(editorFontSizeKey, value);
            }
        });
        slider.render({
            elem: '#id-editorSlider',
            value: viewStore.get(editorHeightKey, 230),
            min: 100,
            max: 800,
            theme: '#22aaff',
            change: function (size) {
                editor.setSize(null, size);
            },
            done: function (value) {
                if(value){
                    viewStore.put(editorHeightKey, value);
                }
            }
        });
        /**
         * 展示数据源
         */
        let activeDataSource;//选中的数据源
        select.render({
            elem: "#dbtype",
            url: ctx + 'dataSourceManager/findDataSourceList',
            select: 10000,
            title: '请选择数据源',
            format: function (data) {
                return parseSelectData(data);
            },
            success: function (data, activeData) {
                //默认选中的数据源需要单独赋值，不会走onSelect
                activeDataSource = activeData == null ? null : activeData[0].code;
                editorHintSettings();
            },
            onselect: function (data) {
                activeDataSource = data;
                editorHintSettings();
            }
        });


        /**
         * 跑马灯提示
         * @type {string[]}
         */
        let box = $('#rollBox');
        let index = 0;
        box.html('<span class="roll-item layui-anim layui-anim-upbit">' + textArr[0] + '</span>');
        setInterval(function () {
            index = (index + 1) % textArr.length;
            box.find('.roll-item').addClass('layui-anim-upbit out');
            setTimeout(function () {
                box.html('<span class="roll-item layui-anim layui-anim-upbit ">' + textArr[index] + '</span>');
            }, 200);
        }, 3000);

        /**
         * 选中内容中获取表名
         * @param cm
         * @returns {*}
         */
        function getSelectTable(cm) {
            let table = cm.getSelection();
            if (table.length === 0 || activeDataSource === null || activeDataSource === '') {
                throw '请选中表名且选中数据源后，在使用快捷键~';
            }
            return table;
        }

        /**
         * 提示元数据
         */
        function hintMeta(cm) {
            if (activeDataSource === null || activeDataSource === '') {
                return false;
            }
            post(ctx + "sqlManager/findMetaTable?database=" + activeDataSource + "&table=" + getSelectTable(cm), null, (res) => {
                if (res.code != 200 || res.data === null) {
                    console.warn("无法提示元数据信息!" + res.msg);
                    return false;
                }
                laytpl($("#view-tale-meta-tpl").html()).render(res.data, function (data) {
                    $("#view-open-table-wrapper").html(data);
                    layer.open({
                        type: 1,
                        area: ['630px', '540px'],
                        title: false,
                        anim: 'slideUp',
                        closeBtn: 0,
                        shadeClose: true,
                        scrollbar: false,
                        content: $('#view-open-table-wrapper')
                    });
                });
            });
        }


        /**
         * 格式化SQL文本
         */
        function formatSql(cm) {
            let config = {
                "language": "sql",
                "tabWidth": 3,
                "keywordCase": "upper"
            };
            let newContent = window.sqlFormatter.format(cm.getValue(), config);
            cm.setValue(newContent);
        }

        /**
         * 提示建表语句
         * @param cm
         * @returns {boolean}
         */
        function showTableSql(cm) {
            if (activeDataSource === null || activeDataSource === '') {
                return false;
            }
            post(ctx + "sqlManager/showTableSql?database=" + activeDataSource + "&table=" + getSelectTable(cm), null, (res) => {
                if (res.code != 200 || res.data === null) {
                    console.warn("无法展示建表语句信息!" + res.msg);
                    return false;
                }
                laytpl($("#table-sql-code-tpl").html()).render(res.data, function (data) {
                    $("#view-open-table-wrapper").html(data);
                    code({
                        elem: '.sql-code',
                        lang: 'SQL',
                        highlighter: "hljs",
                        encode: true,
                        langMarker: true,
                        codeRender: function (code, opts) {
                            return hljs.highlight(code, {language: opts.lang}).value;
                        }
                    });
                    layer.open({
                        type: 1,
                        area: ['630px', '540px'],
                        title: false,
                        anim: 'slideUp',
                        closeBtn: 0,
                        shadeClose: true,
                        scrollbar: false,
                        content: $('#view-open-table-wrapper'),
                    });
                });
            });
        }

        /**
         * 设置编辑器提示表名及字段功能
         */
        function editorHintSettings() {
            if (activeDataSource === null || activeDataSource === '') {
                return false;
            }
            post(ctx + "sqlManager/findTableField?database=" + activeDataSource, null, (res) => {
                if (res.code != 200 || res.data === null) {
                    console.warn("获取表名及字段失败,无法提供编辑器提示表名功能!" + res.msg);
                    return false;
                }
                editor.setOption('hintOptions', {
                    completeSingle: false,
                    tables: res.data
                });
            });
        }

        /**
         * 展示sql保存记录
         */
        function sqlTextSelect() {
            select.render({
                elem: "#sqlTexts",
                url: ctx + 'sqlManager/querySqlTextSelect',
                select: 10000,
                title: 'SQL片段',
                format: function (data) {
                    return parseSelectData(data);
                },
                success: function (data, activeData) {
                },
                onselect: function (data) {
                    data = Base64.decode(data);
                    let oldContent = editor.getValue();
                    if (oldContent != null && oldContent.length > 0) {
                        data = oldContent + '\n' + data;
                    }
                    editor.setValue(data);
                }
            });
        }

        sqlTextSelect();

        /**
         * 保存SQL文本
         */
        form.on('submit(saveSqlText)', function (data) {
            let sqlContent = editor.getValue().trim();
            if (sqlContent == "" || sqlContent == null) {
                message("请输入SQL语句后保存~", false);
                return false;
            }
            let openConfig = {
                type: 1,
                skin: 'layui-layer-win10',
                shade: 0.3,
                area: '520px',
                title: '*保存SQL文本',
                closeBtn: 0,
                formType: 0,
                anim: 'slideDown',
                shadeClose: true,
                success: function () {
                    $(".layui-layer-content .layui-layer-input").toggleClass("layui-input").attr('placeHolder', '请起个名字吧...');
                }
            };
            layer.prompt(openConfig, function (data, index) {
                if (data === '' || data == null) {
                    layer.msg('名字不能为空~', {icon: 2});
                    return false;
                }
                layer.close(index);
                post(ctx + "sqlManager/saveSqlText", {'sqlText': Base64.encode(sqlContent), 'title': data}, (res) => {
                    layer.msg(res.msg, {icon: res.code === 200 ? 1 : 2}, (res) => {
                        sqlTextSelect();
                    });
                })
            });
            return false;
        });


        /**
         * sql执行窗口隐藏
         */
        form.on('submit(showSqlDiv)', function (data) {
            let display = $('.sqlText').css('display');
            if (display === 'none') {
                $('.sqlText').css('display', 'block');
                $("#msgDiv").css('display', 'block');
                $("#showSqlDiv").html('<i class="layui-icon layui-icon-up">&nbsp;</i>收起');
            } else {
                $('.sqlText').css('display', 'none');
                $("#msgDiv").css('display', 'none');
                $("#showSqlDiv").html('<i class="layui-icon layui-icon-down">&nbsp;</i>展开');
            }
            return false;
        });


        /**
         * 隐藏信息内容
         */
        $("#closeMsgDivBtn").click(function () {
            $("#msgDiv").css('display', 'none');
        });

        /**
         * 执行SQL
         */
        form.on('submit(execute)', function (data) {
            $("#sqlTableDiv").hide();
            if (activeDataSource === "" || activeDataSource == null) {
                message("请先选择数据源~", false);
                return false;
            }
            let sqlContent = editor.getValue().trim();
            if (sqlContent === "" || sqlContent == null) {
                message("请输入要执行的SQL~", false);
                return false;
            }
            let pitchTxt = editor.getSelection();
            if (pitchTxt.length !== 0) {
                sqlContent = pitchTxt;
            }
            let intervalTime = 0;
            let interval = setInterval(function () {
                intervalTime++;
                message("执行耗时:" + intervalTime + "毫秒", true);
            }, 1);
            post(ctx + "sqlManager/executeSqlNew", {'dataBaseName': activeDataSource, 'sqlText': sqlContent}, (res) => {
                window.clearInterval(interval);
                if (pageVisibility === 'hidden') {
                    sendNotification("SQL执行完成,请查看页面执行结果~");
                }
                if (!res) {
                    message("结果返回未知异常！", false);
                    return false;
                }
                if (res.code !== 200) {
                    let msg = res.msg == null ? "空指针异常,请查看日志!" : res.msg;
                    message(msg, false);
                    return false;
                }
                setTimeout(() => tableInit(res.data), 0);
            });
            return false;
        });


        /**
         * 渲染数据表格
         * @param table
         * @param data
         * @returns {boolean}
         */
        let elementTabCount = [];//tab总数
        function tableInit(data) {
            for (let i = 0; i < elementTabCount.length; i++) {
                element.tabDelete('sqlTableTab', elementTabCount[i]);
            }
            $("#sqlTableDiv").hide();
            $("#msgDiv").hide();
            $("#msgSpan").html("");
            let index = 0;
            for (let i = 0; i < data.length; i++) {
                index++;
                let item = data[i];
                let statusMsg = "";
                if ((typeof item.data === 'number' && !isNaN(item.data))) {
                    statusMsg = item.status === 2 ? "执行失败 " + item.errorMessage : "执行成功影响【" + item.data + "】条数据!";
                }
                if (item.data === null) {
                    statusMsg = item.status === 2 ? "执行失败 " + item.errorMessage : "执行成功返回为空!";
                }
                if (item.data instanceof Array && item.status === 2) {
                    statusMsg = "执行失败 " + item.errorMessage;
                }
                if (typeof item.data == 'string' && item.status === 2) {
                    statusMsg = "执行失败 " + item.errorMessage;
                }
                if (statusMsg !== "") {
                    let msg = "第[" + index + "]条SQL语句" + statusMsg + "<br>";
                    $("#msgSpan").append(msg);
                    $("#msgDiv").show();
                }
                if (item.type === 1) {
                    continue;
                }
                if (item.status === 2) {
                    continue;
                }
                //渲染表格
                $("#sqlTableDiv").show();
                let rowsData = item.data;
                let headArr = Object.keys(rowsData[0]);
                let head = [];
                for (let key in headArr) {
                    head.push({field: headArr[key], title: headArr[key], sort: true});
                }
                if (rowsData.length === 1) {
                    let distinctList = [...new Set(Object.values(data[i].data[0]))];
                    if (distinctList.length === 1 && distinctList[0] === "WEB_SQL_PLACEHOLDER") {
                        rowsData = [];
                    }
                }
                //add Tab
                let elId = "sqlTable" + index;
                elementTabCount.push(elId);
                element.tabAdd('sqlTableTab', {
                    title: '结果集' + index,
                    content: "<table class='layui-table' id='" + elId + "'></table>",
                    id: elId,
                    change: true
                })
                table.render({
                    elem: '#' + elId
                    , cols: [head]
                    , data: rowsData
                    , time: item.time
                    , title: '结果集' + (i + 1)
                    , loading: true
                    , height: 535
                    , cellMinWidth: 150
                    , limit: 50
                    , limits: [50, 500, 1000, 3000, 5000, 8000, 10000]
                    , even: true
                    , toolbar: '#table-page-toolbar'
                    , defaultToolbar: ['filter', 'exports', 'print']
                    , page: {prev: '上一页', next: '下一页', groups: 6}
                    , defaultContextmenu: false
                    , pagebar: '#table-page-pageBar'
                    , text: {none: '查询返回0条数据'}
                    , size: viewStore.get(tableSizeKey, 'sm')
                });
                table.resize(elId);
                rowContextMenu(elId, item);
                pageBar(elId);
            }
            /*window.scrollTo({
                top: 180,
                behavior: "smooth"
            });*/
            return false;
        }


        /**
         * 发起导出申请，查询结果的数据导出excel
         */
        form.on('submit(exportExcel)', function (data) {
            if (activeDataSource === "" || activeDataSource == null) {
                message("您修改数据源后请重新查询~", false);
                return false;
            }
            let sqlContent = editor.getValue().trim();
            if (sqlContent === "" || sqlContent == null) {
                message("清输入SQL语句后在导出~", false);
                return false;
            }
            let pitchTxt = editor.getSelection();
            if (pitchTxt.length !== 0) {
                sqlContent = pitchTxt;
            }
            post(ctx + "sqlManager/createAsyncExport", {
                'dataBaseName': activeDataSource,
                'sqlText': sqlContent
            }, (res) => {
                if (!res) {
                    layer.msg("导出失败.", {icon: 2});
                    return false;
                }
                if (res.code !== 200) {
                    layer.msg(res.msg, {icon: 2, time: 5000});
                    return false;
                }
                var async = res.data.async;
                var id = res.data.id;
                if (!async) {
                    if (pageVisibility === 'hidden') {
                        sendNotification("文件导出中,请查看浏览器下载记录~");
                    }
                    window.open(ctx + "sqlManager/downloadExcelFile?id=" + id);
                } else {
                    layer.msg("生成文件中请不要关闭页面,结束会自动下载!", {icon: 1, time: 3000}, () => {
                        downloadExcel(id);
                    });
                }
            });
            return false;
        });

        /**
         * 异步导出文件，轮询检查是否完成
         * @param id
         */
        function downloadExcel(id) {
            var finalId = id;
            post(ctx + "sqlManager/queryExportData?id=" + id, null, (res) => {
                if (!res) {
                    layer.msg("导出失败.", {icon: 2});
                    return false;
                }
                if (res.code === 500 && res.msg === "导出中") {
                    console.info("别着急,还在生产excel..." + finalId);
                    setTimeout(() => downloadExcel(finalId), 3000);
                    return false;
                }
                if (res.code !== 200) {
                    layer.msg(res.msg, {icon: 2});
                    return false;
                }
                var id = res.data.id;
                if (pageVisibility === 'hidden') {
                    sendNotification("文件导出中,请查看浏览器下载记录~");
                }
                window.open(ctx + "sqlManager/downloadExcelFile?id=" + id);
            });
        }

        /**
         * 分页btn 增加返回顶部
         */
        function pageBar(id) {
            table.on('pagebar(' + id + ')', function (obj) {
                let eventValue = obj.event;
                if (eventValue === "footerBtn1") {
                    window.scrollTo({
                        top: 0,
                        behavior: "smooth"
                    });
                    return false;
                }
                if (eventValue === "footerBtn2") {
                    window.scrollTo({
                        top: 70,
                        behavior: "smooth"
                    });
                    return false;
                }
            });
        }

        /**
         * 表格增加点击事件
         */
        function rowContextMenu(id, res) {
            table.on('rowContextmenu(' + id + ')', function (obj) {
                let data = obj.data;
                let index = obj.index;
                dropdown.render({
                    trigger: 'contextmenu',
                    show: true,
                    data: [
                        {title: '复制JSON数据', id: 'json'}
                        //{title: 'INSERT语句', id: 'insert'}
                    ],
                    click: function (menuData, othis) {
                        if (menuData.id === "json") {
                            layer.alert(util.escape(JSON.stringify({data})));
                            return false;
                        }
                        // 待处理拼接，暂时无法应对多条sql执行
                        if (menuData.id === "insert") {
                            layer.alert("insert into " + res.tableNameList + " values.....");
                            return false;
                        }
                    }
                });
            });
        }

        function message(text, flag) {
            $("#msgDiv").show();
            if (!flag) {
                $("#msgSpan").text(text);
                $("#sqlTableDiv").hide();
            } else {
                $("#msgSpan").text(text);
                $("#sqlTableDiv").show();
            }
        }

        /**
         * tab删除事件,最后一个被删除是隐藏tableDiv
         */
        element.on('tabDelete(sqlTableTab)', function (data) {
            try {
                if ($("#lists li").length == 0) {
                    $("#sqlTableDiv").hide();
                }
            } catch (err) {
                console.error('隐藏失败');
            }
        });

        /**
         * tab切换事件,修正table表格单元格不对齐问题
         */
        element.on('tab(sqlTableTab)', function (data) {
            try {
                table.resize("sqlTable" + data.index);
            } catch (err) {
                console.error('resize 失败');
            }
        });

        /**
         * 动态悬浮功能菜单
         */
        document.addEventListener('scroll', function () {
            var navContainer = document.getElementById("menu-id");
            if (window.pageYOffset > 0) {
                navContainer.classList.add('nav-container');
            } else {
                navContainer.classList.remove('nav-container');
            }
        });

        /**
         * 快捷键
         * @param event
         */
        document.onkeydown = function (event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 119) {
                $("#execute").trigger('click');
            }
            if (e && e.keyCode == 118) {
                $("#newSqlOpen").trigger('click');
            }
            if (e && e.keyCode == 120) {
                $("#saveSqlText").trigger('click');
            }
        };

        /**
         * 检查页面是否隐藏
         */
        document.addEventListener('visibilitychange', function () {
            pageVisibility = document.visibilityState
        })

        /**
         * 表格尺寸
         */
        dropdown.render({
            elem: '#dropdownTableSize',
            data: [{
                id: 'lg',
                title: '最大'
            }, {
                id: 'md',
                title: '中等'
            }, {
                id: 'sm',
                title: '最小'
            }],
            click: function (obj) {
                viewStore.put(tableSizeKey, obj.id);
                layer.msg('设置成功，查询试下~', {icon: 1});
            }
        });

        // 右键菜单
        dropdown.render({
            elem: '#ID-dropdown-contextmenu',
            trigger: 'contextmenu',
            isAllowSpread: false,
            //style: 'width: 200px',
            accordion: true,
            data: [
                {
                    title: '执行',
                    id: 'execute'
                },
                {
                    title: '格式化',
                    id: 'format'
                },
                {
                    title: '保存',
                    id: 'save'
                },
                {
                    title: '导出',
                    id: 'export'
                }, {
                    title: '刷新',
                    id: 'reload'
                }, {type: '-'}, {
                    title: '更多',
                    id: '#3',
                    child: [{
                        title: '元数据',
                        id: 'meta'
                    }, {
                        title: '建表语句',
                        id: 'createSql'
                    }, {
                        title: '新窗口',
                        id: 'open'
                    }]
                },
            ],
            click: function (obj, othis) {
                if (obj.id === 'execute') {
                    $("#execute").trigger('click');
                }
                if (obj.id === 'open') {
                    $("#newSqlOpen").trigger('click');
                }
                if (obj.id === 'save') {
                    $("#saveSqlText").trigger('click');
                }
                if (obj.id === 'export') {
                    $("#exportExcel").trigger('click');
                }
                if (obj.id === 'reload') {
                    location.reload();
                }
                //格式化
                if (obj.id === 'format') {
                    const altCKeyHandler = editor.getOption("extraKeys")["Alt-C"];
                    if (altCKeyHandler) {
                        altCKeyHandler(editor);
                    }
                }
                if (obj.id === 'format') {
                    const altCKeyHandler = editor.getOption("extraKeys")["Alt-C"];
                    if (altCKeyHandler) {
                        altCKeyHandler(editor);
                    }
                }
                if (obj.id === 'meta') {
                    const altCKeyHandler = editor.getOption("extraKeys")["Alt-X"];
                    if (altCKeyHandler) {
                        altCKeyHandler(editor);
                    }
                }
                if (obj.id === 'createSql') {
                    const altCKeyHandler = editor.getOption("extraKeys")["Alt-Z"];
                    if (altCKeyHandler) {
                        altCKeyHandler(editor);
                    }
                }
            }
        });
        //进入页面后,让编辑器获得焦点
        editor.focus();
    })

</script>
</body>
</html>